@import './login-anim.less';

@login-panel-width: 380px;
@login-panel-height: 420px;
@login-panel-an-delay: 6s;
@login-panel-border-radius: 8px;
@login-panel-padding: 10px 10px;
@login-panel-color-blue: #45f3ff;
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #eff0f4 !important;
}

.login-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    .drop {
        transition: all 1s;
        position: relative;
        width: 60vh;
        height: 60vh;
        box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.05), 25px 35px 20px rgba(0, 0, 0, 0.05),
            25px 30px 30px rgba(0, 0, 0, 0.05), inset -20px -20px 25px rgba(255, 255, 255, 0.9);
        border-radius: 50% 50% 51% 49% / 30% 60% 40% 70%;
        animation: 20s watermove linear infinite;

        // &:hover {
        // border-radius: 50%;
        // }
        &::after,
        &::before {
            content: '';
            position: absolute;
            background: #fff;
            border-radius: 50%;
            opacity: 0.9;
        }
        &::before {
            top: 14%;
            left: 18%;
            width: 35px;
            height: 35px;
        }

        &::after {
            top: 23%;
            left: 25%;
            width: 15px;
            height: 15px;
        }

        .content {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 60vh;
            text-align: center;
            padding: 14% 18%;
            gap: 30px;

            .title {
                position: relative;
                width: 12vh;
                height: 12vh;
                font-size: 2.3vh;
                background-color: #eff0f4;
                border-radius: 62% 38% 46% 54% / 30% 67% 33% 70%;
                box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
                    inset -2px -5px 10px rgba(255, 255, 255, 1), 15px 10px 15px rgba(0, 0, 0, 0.05),
                    15px 10px 15px rgba(0, 0, 0, 0.025);
                display: flex;
                justify-content: center;
                align-items: center;
                color: var(--clr);
                user-select: none;
                transition: all 1s;
                font-weight: 800;
                &:hover {
                    border-radius: 50% !important;
                }
            }
            .register-title {
                position: absolute;
                right: 16%;
                height: 7vh;
                width: 7vh;
                top: 28%;
                font-size: 1.3vh;
                border-radius: 62% 38% 46% 54% / 73% 53% 47% 27%;
            }

            .inputBox {
                position: relative;
                input {
                    position: relative;
                    width: 100%;
                    padding: @login-panel-padding;
                    background: transparent;
                    border: none;
                    outline: none;
                    color: #23242a;
                    font-size: 1em;
                    letter-spacing: 0.05em;
                    z-index: 10;
                    // text-align: center;
                }
                input:valid ~ span,
                input:focus ~ span {
                    color: @login-panel-color-blue !important;
                    transform: translateX(-10px) translateY(-34px);
                    font-size: 0.75em !important;
                }
                .input-span {
                    position: absolute;
                    left: 0;
                    padding: @login-panel-padding;
                    font-size: 1em;
                    color: #8f8f8f;
                    pointer-events: none;
                    letter-spacing: 0.05em;
                    transition: 0.5s;
                }
                i {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: 2px;
                    background: @login-panel-color-blue;
                    border-radius: 4px;
                    transition: 0.5s;
                    pointer-events: none;
                    z-index: 9;
                }
                input:valid ~ i,
                input:focus ~ i {
                    height: 44px;
                }
            }
            .login-btn {
                position: relative;
                padding: 5% 20%;
                background: var(--clr);
                color: #fff;
                border-radius: 50px;
                font-size: 1.3em;
                font-weight: 500;
                text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
                opacity: 0.75;
            }
        }
    }
}
